<template>
  <div class="configuredRule">
    <el-card shadow="hover" class="card-search">
      <el-row>
        <el-col :span="20">
          <div class="search_detail">
            <div class="search">
              <span class="span_name">人员名称：</span>
              <el-input v-model="state.params.realName" placeholder="请输入" clearable />
            </div>
            <div class="search">
              <span class="span_name">创建日期：</span>
              <el-date-picker v-model="state.params.time" type="daterange" range-separator="~" start-placeholder="开始时间"
                value-format="YYYY-MM-DD" end-placeholder="结束时间" />
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
          <el-button type="danger" :icon="Delete" @click="reast">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="hover" class="card-main">
      <el-table :data="state.tableData" stripe style="width: 100%">
        <el-table-column type="index" width="55" label="序号" />
        <el-table-column prop="realName" label="姓名" width="120" />
        <el-table-column prop="mobile" label="手机号" show-overflow-tooltip />
        <!-- <el-table-column prop="certNo" label="身份证" show-overflow-tooltip /> -->
        <el-table-column prop="name" label="地址">
          <template #default="scope">
            {{ scope.row.cityName }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="详细地址" show-overflow-tooltip />
        <!-- <el-table-column prop="orderCount" label="订单数量" show-overflow-tooltip /> -->
      </el-table>
      <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="state.totalCount"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();

const state = reactive({
  options: [
    { value: '01', label: '一个月内' },
    { value: '02', label: '一个月外' },
  ],
  name: '',
  time: '',
  tableData: [
  ],
  page: 1,
  totalCount: 0,
  params: {
    realName: '',
    time: ['', ''],
    startDate: '',
    endDate: '',
  }
})
const getData = async (params) => {
  //json对象转formdata格式
  function jsonToFormData(config) {
    const formData = new FormData();
    //循环传入的值转换formData
    Object.keys(config).forEach((key) => {
      formData.append(key, config[key]);
    })
    return formData;
  }
  let fromdata = jsonToFormData({
    page: params, limit: 10,
    realName: state.params.realName,
    startDate: state.params.time[0],
    endDate: state.params.time[1]
  })
  let res = await proxy.$api.home.userList(fromdata)
  state.tableData = res.page.list
  state.totalPage = res.page.totalCount
}
const search = () => {
  getData(state.page)
}
const reast = () => {
  state.params = {
    realName: '',
    time: ['', ''],
    startDate: '',
    endDate: '',
  }
  getData(state.page)
}
getData(state.page)
const handleCurrentChange = (e) => {
  console.log('r', e);
  state.page = e
  getData(e)
}
</script>

<style lang="scss" scoped>
.configuredRule {
  padding: 20px;

  .search_detail {
    display: flex;

    .search {
      margin-right: 10px;
      display: flex;
      align-items: center;

      .span_name {
        width: 110px;
        font-size: 16px;
      }
    }
  }

  .card-main {
    margin-top: 20px;
    height: calc(100vh - 200px);
    position: relative;

    .pagination {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
      text-align: right;
    }
  }
}
</style>